<template>
    <div class='my_container'>
        <div class="backdrop"></div>
        <div class="my_content">
            <div class="my_detail">
                <div class="avatar">
                    <img :src="mySrcImg" alt="" style="border-radius: 50%;">
                </div>
                <div class="name_detail">
                    <span>{{ myName }}</span>
                    <div><span>XXXXX</span><span>yyyyyyyyy</span></div>
                </div>
            </div>
        </div>
        <div class="line"></div>
        <!-- 下载记录 -->
        <div class="downRecord">
            <div style="font-weight: 900; font-size: 18px;">下载记录</div>
            <el-table class="table" :data="tableData" stripe style="width: 100% ;" size="mini">
                <el-table-column prop="date" label="影视名" width="100">
                </el-table-column>
                <el-table-column prop="name" label="时间" width="100">
                </el-table-column>
                <el-table-column prop="address" label="路径">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

export default {
    name: "my-message",
    components: {

    },
    data() {
        return {
            myName: 'Syy.',
            mySrcImg: require('../../../assets/1.png'),
            isShow: true,//控制我的页面的显隐
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
        {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },

        ]
        };
    },
    created() {

    },
    mounted() {
    },
    methods: {
    }
};
</script>

<style lang='scss' scoped>
.my_container {
    position: relative;
    height: 87.2vh;

    .backdrop {
        background: linear-gradient(to bottom, #e0e0e0, #fff);
        width: 100%;
        height: 200px;
    }

    .my_content {
        position: absolute;
        top: 50px;
        left: 7%;
        background-color: #fff;
        width: 86%;
        height: 150px;
        border-radius: 10px;
        padding: 20px;

        .my_detail {
            display: flex;

            .avatar {
                border-radius: 50%;
                width: 80px;
                height: 80px;
                overflow: hidden;

                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            .name_detail {
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                >span:first-child {
                    font-weight: 900;
                }
            }
        }
    }

    .line {
        height: 1px;
        width: 100%;
        background-color: #e0e0e0;
        margin-top: 10px;
    }

    .downRecord {
        padding: 10px;
        height: 40vh;
    }


    .table {
        max-height: 60vh;
        overflow-y: auto;
    }
    ::before{
        height: 0;
    }
    @media screen and (min-width: 2360px) {
        .table {
            max-height: 54.6vh;
    
        }
    }
    
    @media screen and (min-width: 2561px) {
        .table {
            height: 39.4vh;
    
        }
    }
}
@media screen and (min-width: 2360px) {
        .my_container {
            height: 81.2vh;
    
        }
    }

@media screen and (min-width: 2561px) {
        .my_container {
            height: 66.2vh;
    
        }
    }

</style>